<template>
    <div>
        <!-- 1.传入数据后，循环生成dom元素 2.判断 最后一条数据 下 不加分割线 -->
        <div class="QuestionView" v-if="current === current"> 
            <template :data="listA[current]">

                <template  
                v-for="item in listA[current]">
    
                    <div class="quesstion" :key="item.question">
                        <el-tag type="danger">问</el-tag>
                        <span>{{ item.question }}</span>
                    </div>
                    <div class="answer" :key="item.answer">
                        <el-tag type="success">答</el-tag>
                        <span>{{ item.answer }}</span>
                    </div>
                    <div class="suggest" :key="item.suggest">
                        <el-tag>赞</el-tag>
                        <span>推荐功能:{{ item.suggest }}</span>
                    </div>
                
                </template>

            </template>

        </div>
        
    </div>
</template>

<script>
export default {
    name: 'QuestionView',
    components:{},
    props:{
        currentData:{
            type:Number,
            default:()=>({})
        }
    },
    data(){
        return{
            // tab栏的核心是当前下标的变量
            current:0,
            listA:[
                [//questionData0
                    {
                        id:1,
                        question:'如何判断入驻B站的前景和价值？',
                        answer:'判断B站涨粉趋势，涨粉难度，UP主量级分布',
                        suggest:' 大盘数据、涨掉粉排行榜'
                    },
                    {
                        id:2,
                        question:'如何查看同行企业或品牌账号现状？',
                        answer:'快速查看同行企业或品牌入驻情况和数据现状',
                        suggest:' up主排行榜-企业号排行榜、搜索up主-找up主'
                    },
                ],
                [//questionData1
                    {
                        id:1,
                        question:'如何分析B站内容生态的带货情况？',
                        answer:'通过品牌营销数据和橱窗商品销量数据判断',
                        suggest:' 热销商品排行、搜索商品'
                    },
                    {
                        id:2,
                        question:'如何分析竞品在B站的投放策略？',
                        answer:'查看某个企业、品牌以及特定产品的营销分析报告',
                        suggest:'品牌营销报告'
                    },
                    {
                        id:3,
                        question:'如何查看竞品在B站的投放数据详情？',
                        answer:'通过行业品牌在B站营销排行以及品牌产品的搜索',
                        suggest:' 品牌声量榜单品牌曝光搜索'
                    },
                    {
                        id:4,
                        question:'如何分析多个品牌在B站营销策略差异？',
                        answer:'通过对某个企业、品牌以及特定产品的营销报告对比分析投放策略差异',
                        suggest:' 品牌营销对比'
                    },
                ],
                [//questionData2
                    {
                        id:1,
                        question:'如何通过UP主粉丝量排行榜快速找号？',
                        answer:'通过排行榜一二级分区快速查找腰部以上UP主',
                        suggest:'UP主排行榜'
                    },
                    {
                        id:2,
                        question:'如何快速找到高潜力、高性价比UP主？',
                        answer:'通过涨粉率排行榜分区、粉丝量级区间、时间范围快速找到高性价比UP主',
                        suggest:'涨/掉粉排行榜-涨粉率排行榜'
                    },
                    {
                        id:3,
                        question:'如何快速找到特定分类、人设的UP主？',
                        answer:'通过账号昵称、分类、粉丝量区间、作品数据区间、认证类型快速找账号',
                        suggest:' 品牌声量榜单品牌曝光搜索'
                    },
                    {
                        id:4,
                        question:'如何使用内容关键词、植入视频形式快速找UP主？',
                        answer:'通过关键词找到发布过特定内容或者产品广告的UP主',
                        suggest:' 搜索up主-用作品找up主'
                    },
                    {
                        id:5,
                        question:'如何查找品牌商单和UP主恰饭视频？',
                        answer:'使用作品找UP主功能中的高级搜索功能， 可以通过用品牌商品+【恰饭】【测评】等和商业推广相关度高的关键词， 进行多条件搜索',
                        suggest:' 搜索up主-用作品找up主、热销商品排行'
                    },
                    {
                        id:6,
                        question:'如何查找和某个UP主相似UP主？',
                        answer:'可以使用搜索找到UP主，再通过相似号查看和TA相似的UP主，快速找到内容调性相似的账号',
                        suggest:' 可以使用搜索找到UP主，再通过相似号查看和TA相似的UP主，快速找到内容调性相似的账号'
                    },
                    {
                        id:7,
                        question:'竞品投了哪些号？效果如何？',
                        answer:'使用搜索商品+热销商品排行榜 ，以及品牌曝光搜索功能中的高级搜索，用多个关键词搜索，排除/定位到推广视频，查看投放数据',
                        suggest:' 品牌曝光搜索、搜索商品、热销商品排行'
                    },
                    {
                        id:8,
                        question:'如何找到B站百大UP主？知名Up主？',
                        answer:'品牌曝光搜索搜索商品热销商品排行',
                        suggest:' 搜索up主-找up主、UP主排行榜'
                    },
                    {
                        id:9,
                        question:'如何管理低、中、高意向UP主资源？',
                        answer:'通过我收藏的UP主，进行自定义分组来管理收藏的UP主',
                        suggest:' 收藏的UP主'
                    },
                ],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
            ],
            listB:[
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
                [{id:1,question:'没了'}],
            ]

        }
    },
    watch:{
        currentData(newVal, oldVal){
            const _this = this;
            const param = newVal;
            // 判断
            if( param !== oldVal ){
                _this.current = param
            } else {
                console.log('子组件QuestionView的watch没有更新');
            }
            // 重新获取数据更新
            this.init()
        }
    },
    methods:{
        init(){
            this.current = this.currentData
            console.log('this.currentData:',this.currentData);
        }
    },
    mounted(){
        this.init()
    }
};
</script>

<style scoped lang='less'>
.QuestionView{
    margin-top: 10px;

}
.quesstion{
    padding-top: 10px;
}
.answer{
    padding-top: 10px;
}
.suggest{
    padding-top: 10px;
}
</style>